<!DOCTYPE HTML>
<html>
<head>
    <title>Hotel Arbour : Home Page</title>
    <!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> -->
	<script src="js/jquery-1.9.1.js" language="javascript"></script>
	<script src="js/jquery-ui-1.10.2.custom.js" language="javascript"></script>
	<script type="text/javascript" src="js/post_watermarkinput.js"></script>
	<link rel="stylesheet" href="CSS/ui-lightness/jquery-ui-1.10.2.custom.css" type="text/css">
	<link href="CSS/vasplus_programming_blog_CSS.css" rel="stylesheet" type="text/css">
	
	<!--<link rel="stylesheet" href="CSS\ui-lightness\jquery-ui-1.10.2.custom.min.css" type="text/css">-->	
	<!--<script src="http://code.jquery.com/jquery-1.9.1.js"></script>-->		
	<!--<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> -->
	<!--<script src="ajax/jquery-ui.js" language="javascript"></script>-->
	
	
<script>
	$(function() {
		$( "#accordion" ).accordion();
		$( "#checkindate" ).datepicker();
		$( "#checkoutdate" ).datepicker();
	});	
	
</script>
<script language="javascript">
	function toggleDiv() {
		document.getElementById('content').style.display = "none";
		document.getElementById('register').style.display = "";
	}
	
	function regSubmit() {
		alert ('Registeration Successful !');
		document.getElementById('content').style.display = "";
		document.getElementById('register').style.display = "none";
	}
	
	function displayRates() {
		document.getElementById('content').style.display = "none";
		document.getElementById('register').style.display = "none";
		document.getElementById('rateList').style.display = "";
	}
	function createObject() {
		var request_type;
		var browser = navigator.appName;
		if(browser == "Microsoft Internet Explorer"){
			request_type = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			request_type = new XMLHttpRequest();
		}
		return request_type;
	}

	var http = createObject();

/* -------------------------- */
/* LOGIN */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
	var nocache = 0;
	function login() {
		
		document.getElementById('login_loading').style.display = "" ;		
		var email = encodeURI(document.getElementById('emailLogin').value);
		var psw = encodeURI(document.getElementById('pswLogin').value);
	// Set te random number to add to URL request
		nocache = Math.random();
	// Pass the login variables like URL variable
		http.open('get', 'login.html?email='+email+'&psw='+psw+'&nocache = '+nocache);
		http.onreadystatechange = loginReply;
		http.send(null);
	}
	
	function loginReply() {
		document.getElementById('login_loading').style.display = "none" ;
		if(http.readyState == 4){ 
			var response = http.responseText;
			if(response == 0){
	// if login fails
				document.getElementById('login_response').innerHTML = 'Login failed! Verify user and password';
	// else if login is ok show a message: "Welcome + the user name".
			} else {
				document.getElementById('login_response').innerHTML = 'Welcome'+response;
			}
		}
	}
	
		
</script>

</head>

<body style="font-family:Calibri;">

<form id="frmindex" name="frmindex" method="POST">	


	<div id="body" style="width:900px ;margin:0 auto; padding:0 0 0 0 auto;">
	
	<!-- Header-->		
	
		<table width="100%" border="0px" cellpadding="0">
		<tr>
			<td><img src="images/logo.jpg" /></td>
			
			<td colspan="2">
				<p align="right" style="font-weight:bold;">			
					<a href="index.html" style="text-decoration:none;"><font style="color:#7E354D">Home&nbsp;&nbsp;|&nbsp;&nbsp;</font></a>
					<a href="index.html" style="text-decoration:none;"><font style="color:#7E354D">Promotion&nbsp;&nbsp;|&nbsp;&nbsp;</font></a>
					<a href="index.html" style="text-decoration:none;"><font style="color:#7E354D">Rooms&nbsp;&nbsp;&nbsp;</font></a>						
				</p> 
				<p align="right" style="font-weight:bold;">
					<div id="login_response"></div>	
				</p>
			</td>
		</tr>
        <tr>
            <td style="width:65%;vertical-align:top;">
				<video width="600" height="260" controls><source src="movie.mp4" type="images/Sample.mp4"></video>
				
            </td>
			
            <td style="width:35%;vertical-align:top;"> 
				<table border="0px" width="100%">
					<tr>
					    <td>
					        <div id="accordion">									
					            <h1 style="border:1px solid #7E354D;"><font style="color:#7E354D">Corporate Login</font></h1>
					                <div>
										<table>
											<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
											
											<tr><td>Login ID:</td><td><input type="text" id="emailLogin" name="emailLogin" size="10"/></td></tr>
											<tr><td>Password:</td><td><input type="text" id="pswLogin" name="pswLogin" size="10"/></td></tr>
											<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
											<tr><td>&nbsp;</td><td><input type="button" id="btnLogin" name="btnLogin" value="Log In" onclick="login();"/>&nbsp;
																	<input type="button" id="signup" name="signup" value="Sign Up" onclick="toggleDiv();"/></td></tr>
										</table>
                                    </div>
									
                                 <h1 style="border:1px solid #7E354D;"><font style="color:#7E354D">Reservation</font></h1>
					                <div>
					                    <table>
											<tr><td>Check-In:</td><td><input type="text" id="checkindate"/></td></tr>
											<tr><td>Check-Out:</td><td><input type="text" id="checkoutdate"/></td></tr>
											<tr>
												<td colspan="2">Nights:&nbsp;<input type="text" id="night" name="night" size="5"/>&nbsp;Room Type:&nbsp;												
											    <select name="roomtype" id="roomtype">
                                                      <option value="executive">Executive</option>
                                                      <option value="deluxe">Deluxe</option>
                                                      <option value="premier">Premier</option>                                                      
                                                    </select> 
                                                </td>
											</tr>
											<tr>
											    
											</tr>
											<tr><td colspan="2">Adult:&nbsp;&nbsp;&nbsp;<input type="text" id="adult" name="adult" size="5"/>&nbsp;Children:&nbsp;<input type="text" id="children" name="children" size="5"/></td></tr>
											<tr><td>&nbsp;</td><td><input type="button" id="checkra<tes" name="checkrates" value="Check Rates" onclick="window.location.href='availibility.html'"/></td>
											
											<tr>
												<td colspan="2" align="center">
													<a href="viewdetail.html" style="text-decoration:none;"><font style="color:#7E354D">View&nbsp;|&nbsp;</font></a>
													<a href="editReserve.html" style="text-decoration:none;"><font style="color:#7E354D">Modify&nbsp;|&nbsp;</font></a> 
													<a href="editReserve.html" style="text-decoration:none;"><font style="color:#7E354D">Cancel&nbsp;</font></a>
												</td>
											</tr>
										</table>
                                    </div>                                  
					        </div>
					    </td>
					</tr>					
				</table>
			</td>
        </tr>
    </table>
	
    <!-- Header-->	
	<!-- Content -->
   <div id="content">
        <table width="100%" border="0px" cellpadding="10 px">
            <tr>
                <td rowspan="2" style="width:50%;vertical-align:top; border-right: 0.05cm solid #7E354D;border-bottom: 0.05cm solid #7E354D;">
				<div>
                <h2><font style="color:#7E354D;">Hotel Arbour</font></h2>
				<h3 style="margin-left:100px;"><font style="color:#7E354D;">...because life is so rewarding</font></h3>
				<div style="margin:10px 0; text-align:center;text-align:center;">
					<img src="images/hotelAdvertisement.jpg" width="200" height="135" border="0" />
				</div>
                <p>Step into The Link Club and enter a captivating world of rewards and lifestyle privileges! Presented exclusively by Ascott, The Link Club rewards our valued corporate clients for making frequent reservations at our serviced residences around the world.</p>
				</div>
				</td>
                <td style="width:50%;vertical-align:top; border-bottom: 0.05cm solid #7E354D;">
				<div>
					<h3 style="background:url(images/icon_loudhaler.gif) top left no-repeat; padding-left:30px; line-height:24px;"><font style="color:#7E354D">Promotions</font></h3>
				</div>
				
				From now till 30 Jun 2013, simply book and stay 30 room nights or more with Ascott and redeem a complimentary 4GB Thumbdrive.
				<div style="margin:10px 0; text-align:center;text-align:center">
					<img src="images/thumbdrive.jpg" width="200" height="135" border="0" />
				</div>
				</td>
            </tr>
			<tr>
				<td style="width:50%;vertical-align:top;border-bottom: 0.05cm solid #7E354D;">
				<h3 style="background:url(images/icon_magnifier.gif) top left no-repeat; padding-left:30px; line-height:24px;"><font style="color:#7E354D">Highlighted Room</font></h3>
				<div class="spotlight-content">
					<p><img hspace="8" height="120" width="178" vspace="8" align="left" 
						src="images/hilightRoom.jpg" alt="" />
					</p>
					<p style="text-align: justify">
					Hotel Arbour offers the right mix of comfort, functionality and style to create the perfect balance with 534 superior rooms; providing an alternative for discerning yet budget-conscious leisure travellers. 
					Set your sight on the M deluxe rooms which are tastefully furnished to provide greater convenience to the traveller looking for business accommodation in Singapore.
					</p></div>
				</td>
			</tr>
		</table>
	</div>
	<div id="availityList" style="display:none;">
		<table width="100%" border="0px">
			<tr>
				<td>Rate List</td>
			</tr>
			<tr>
				<td>Room Type</td><td>No Preference</td>
			</tr>
				<td>Arrival/Departure</td><td>24/03/2013 - 07/04/2013</td><td>Standard Check-In Time</td><td>15:00</td>
			</tr>
			<tr>
				<td>Number of Nights</td><td>14</td><td>Standard Check-Out Time</td><td>12:00</td>
			</tr>
			<tr>
				<td>Adults / Children</td><td>1 / 0</td>
			</tr>
			<tr>
				<td>Number of Units</td><td>1</td>
			</tr>
		</table>
		<table width="100%" border="0px">			
			<tr>
				<td style="border-top: 0.05cm solid gray;">1 Bedroom Executive</td> 	<td style="border-top: 0.05cm solid gray;">Rates From</td> 			
			</tr>
			<tr>
				<td>1 bedroom with 1 bathroom. 1 king or queen size bed (subject to availability). Telephone with IDD and voicemail facilities, TV, DVD/CD/VCD player, iron and board, hairdryer, alarm clock, in-room safe. refrigerator, cooker hob and hood, microwave, oven, electric kettle and toaster available. 52 sqm / 560 sq ft. Maximum occupancy: 2 pax + 1 pax (extra bed).</td>
				<td width="10%">192.00 SGD <br> per night <br> <input type="submit" id="reserve" name="reserve" value="Reserve"/></td>
			</tr>			
		</table>
		<table width="100%" border="0px">			
			<tr>
				<td style="border-top: 0.05cm solid gray;">1 Bedroom Premier</td> 	<td style="border-top: 0.05cm solid gray;">Rates From</td> 			
			</tr>
			<tr>
				<td>1 bedroom with 1 bathroom. 1 king or queen size bed (subject to availability). Telephone with IDD and voicemail facilities, TV, DVD/CD/VCD player, iron and board, hairdryer, alarm clock, in-room safe. refrigerator, cooker hob and hood, microwave, oven, electric kettle and toaster available. 52 sqm / 560 sq ft. Maximum occupancy: 2 pax + 1 pax (extra bed).</td>
				<td width="10%">192.00 SGD <br> per night <br> <input type="submit" id="reserve" name="reserve" value="Reserve"/></td>
			</tr>			
		</table>
	</div>
   <!-- Content -->
  <!-- Register -->
	
	<div id="register" style="display:none;">
		<table width="100%" border="0px">
            <tr>
                <td style="width:50%;vertical-align:top;"><b><u>Login Information</u></b></td>
			</tr>
			<tr>
				<td>Email : </td><td><input type="text" id="newemail" name="newemail" size="10"/></td> 
			</tr>
			<tr>
				<td>Password : </td><td><input type="text" id="newpwd" name="newpwd" size="10"/></td> 
			</tr>	
			<tr>
                <td style="width:50%;vertical-align:top;"><b><u>Company Information</u></b></td>
			</tr>
            <tr>
				<td>Company Name : </td><td><input type="text" id="compname" name="compname" size="10"/></td> 
			</tr>
			 <tr>
				<td>Department : </td><td><input type="text" id="department" name="department" size="10"/></td> 
			</tr>
			 <tr>
				<td>Designation : </td><td><input type="text" id="designation" name="designation" size="10"/></td> 
			</tr>
			<tr>
                <td style="width:50%;vertical-align:top;"><b><u>Contact</u></b></td>
			</tr>
            <tr>
				<td>Country : </td><td><input type="text" id="country" name="country" size="10"/></td> 
			</tr>
			 <tr>
				<td>Address : </td><td><input type="text" id="address" name="address" size="10"/></td> 
			</tr>
			<tr>
				<td>City : </td><td><input type="text" id="city" name="city" size="10"/></td> 
			</tr>
			<tr>
				<td>Phone No.: </td><td><input type="text" id="phone" name="phone" size="10"/></td> 
			</tr>
			<tr>
				<td>Fax : </td><td><input type="text" id="fax" name="fax" size="10"/></td> 
			</tr>
			<tr>
				<td colspan="2"><input type="button" id="newregsubmit" name="newregsubmit" value="Submit" onclick="regSubmit();"/></td> 
			</tr>
		</table>
	</div>
	<!-- Register -->
	<!-- Footer -->
	<div id="footer">
		<table width="100%" border="0px" cellpadding="3px">            
			<tr>
				<td ><br>
						<div style="wi<br>:550px;" align="left">
						<textarea cols="40" rows="8" name="posted_comment" id="posted_comment" placeholder="What's on your mind?"  class="textAreaBox" style="width:500px; height:20px; padding-top:10px;"></textarea></div>
						<div style="width:420px;float:left; padding-top:5px; border:0px solid #CCC;" align="left">
							<div id="comment_logout" onClick="comment_logout();" style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#69F;display:none; padding-top:10px; cursor:pointer;"><span class="ccc"><a href="javascript:void(0);">Logout</a></span></div>
							<input type="text" placeholder="Fullname" style="width:290px; height:20px;" id="fullname_id" class="textAreaBox" value=""></div>
						<div style="width:100px; float:left;padding-top:5px;border:0px solid #CCC;" align="right">
						<a href="javascript:void(0);" class="vpb_general_button" onClick="Post_Comment_By_Vasplus_Programming_Blog();">Post</a>
						</div><br clear="all">
						<div style="width:500px;float:left; padding-top:0px;" align="left">
						<input type="text" placeholder="Email Address" style="width:290px; height:20px;" id="email_id" class="textAreaBox" 
						value="">
						</div><br clear="all"><br clear="all">
						<div align="left" id="display_posted_comments_by_vasplus_programming_blog"></div><br clear="all">
						<div align="left" id="vasplusProgrammingBlogCommentsPosted"></div>
						&nbsp;
						
				</td>
				<td style="width:350px;vertical-align:top;"> <br><iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"
						scrolling="no" frameborder="0"
						style="border:none; width:450px; height:80px"></iframe></td>
			</tr>
			
     </table>
   </div>
	<!-- Footer -->
   </div>
</form>
</body>
</html>
